<template>
	<view class="">
		<Header title="设置信息" :isHome="true" :isWhite='true'></Header>
		<view class="totalInfo">
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						头像
					</view>
					<view class="right" @click="chooseAvatar">
						<image src="/static/avator.png" v-if="!infoList.avatar" mode="" class="avator"></image>
						<image :src="img_url + infoList.avatar" v-else mode="" class="avator"></image>
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						家长姓名
					</view>
					<view class="right">
						<input type="text" v-model="infoList.adultname" data-type="adultname" disabled
							placeholder="请输入家长姓名" @click="showPop" />
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						家长手机号
					</view>
					<view class="right">
						<button class="btn-get" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber"
							v-if="infoList.mobile">{{infoList.mobile}}</button>
						<button class="btn-get" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber"
							v-else>请输入手机号</button>
						<!-- <input type="number" v-model="infoList.mobile" placeholder="请输入手机号" /> -->
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						儿童姓名
					</view>
					<view class="right">
						<input type="text" v-model="infoList.childrenname" data-type="childrenname" disabled
							placeholder="请输入儿童姓名" @click="showPop" />
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						学校名称
					</view>
					<view class="right">
						<input type="number" v-model="infoList.school" data-type="school" disabled placeholder="请输入学校名称"
							@click="showPop" />
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						就读年级
					</view>
					<view class="right">
						<input type="number" v-model="infoList.grade" data-type="grade" disabled placeholder="请输入年级"
							@click="showPop" />
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						所在省/市/区
					</view>
					<view class="right" @tap="openPicker">
						<!-- <input type="number" v-model="infoList.area" data-type="area" disabled placeholder="请选择省市区" /> -->
						<view class="area" :class="{'area-active':totalAddress}" data-type="area">
							{{totalAddress||'请选择省市区'}}
						</view>
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
			<view class="totalInfoall">
				<view class="totalInfoPer">
					<view class="leftTitle">
						详细地址
					</view>
					<view class="right">
						<view class="area" :class="{'area-active':infoList.address}" data-type="address"
							@click="showPop">
							{{infoList.address||'请输入详细地址'}}
						</view>
						<image src="/static/rightgray.png" mode="" class="rightgray"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="logout" @click="Loginout()">
			退出登录
		</view>
		<!-- 输入框弹窗 -->
		<view>
			<u-popup :show="show" :round="12" mode="center" @close="close" @open="open">
				<view class="popContent">
					<view class="popTitle">
						{{ getPopupTitle() }}
					</view>
					<view class="inputInfo">
						<input type="text" placeholder="请输入" v-model="popupInputValue" />
						<image src="/static/clearable.png" mode="" class="clearable" @click="clearHandle"></image>

					</view>
					<view class="saveBtn" @click="editUserInfo">
						保存
					</view>
					<image src="/static/close.png" mode="" class="close" @click="show=false"></image>
				</view>
			</u-popup>
		</view>
		<!-- 省市区弹窗 -->
		<cc-selectDity :province="province" :city="city" :area="area" :show="showArea" @changeClick="changeClick"
			@sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
	</view>
</template>

<script>
	import {
		get,
		post,
		img_url
	} from '../../utils/request';
	export default {
		data() {
			return {
				img_url:img_url,
				show: false,
				currentInputType: '',
				popupInputValue: '', // 新增，用于绑定弹窗中输入框的值
				infoList: {},
				colors: '#f23a3a',
				showArea: false,
				province: "广东省",
				city: "广州市",
				area: "天河区",
				areaCode: "440106",
				isShow: true,
				totalAddress: ''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getPhoneNumber(e) {
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					get('/user/get_wx_mobile?code=' + e.detail.code).then((res) => {
						if (res.code == 1) {
							// this.infoList.mobile = res.data.phoneNumber
							// 获取到手机号，进行微信手机号登录接口
							this.wxMobileLogin()
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取失败'
							})
						}
					});
				} else {
					console.error(e.detail.errMsg);
				}
			},
			wxMobileLogin() {
				var that = this
				wx.login({
					success(res) {
						if (res.code) {
							wx.request({
								url: that.img_url+'/api/user/wx_mobile_login',
								method: 'POST',
								data: {
									code: res.code,
									mobile: mobile,
									invite_mobile: invite_mobile
								},
								success: (res) => {
									if (res.statusCode >= 200 && res.statusCode < 300) {
										console.log(res);
										uni.setStorageSync('userInfo', res.data.data.userinfo)
										uni.setStorageSync('token', res.data.data.userinfo.token)
									} else {
										// 请求失败，但服务器返回了错误信息
										reject(res.data);
									}
								},
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
				// post('/user/wx_mobile_login', {
				// 		code: res.code,
				// 		mobile: mobile,
				// 		invite_mobile: invite_mobile
				// 	}).then((res) => {
				// 		if (res.code == 1) {
				// 			uni.setStorageSync('userInfo', res.data.data.userinfo)
				// 			uni.setStorageSync('token', res.data.data.userinfo.token)
				// 		} else {
				// 			uni.showToast({
				// 				icon: 'none',
				// 				title: '登录失败'
				// 			})
				// 		}
				// 	}
				// }
			},
			editUserInfo() {
				const inputProps = {
					'adultname': 'adultname',
					'childrenname': 'childrenname',
					'school': 'school',
					'grade': 'grade',
					'address': 'address'
				};
				if (inputProps[this.currentInputType]) {
					this.infoList[inputProps[this.currentInputType]] = this.popupInputValue;
				}
				console.log(this.infoList);
				post('/user/edit_user', {
						avatar: this.infoList.avatar,
						adultname: this.infoList.adultname,
						childrenname: this.infoList.childrenname,
						school: this.infoList.school,
						grade: this.infoList.grade,
						province: this.infoList.province,
						city: this.infoList.city,
						area: this.infoList.area,
						address: this.infoList.address
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
					})
					.catch(err => {
						uni.showToast({
							icon: 'none',
							title: '修改失败'
						})
					});
				this.show = false; // 保存后关闭弹窗
			},
			getUserInfo() {
				get('/user/user_info')
					.then(res => {
						this.infoList = res.data
						this.totalAddress = this.infoList.province + this.infoList.city + this.infoList.area;
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			Loginout() {
				get('/user/logout')
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '退出成功！',
								icon: 'none'
							})
							uni.removeStorageSync('token')
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/index/index'
								})
							},2000)
						} else {
							uni.showToast({
								title: '退出失败！',
								icon: 'none'
							})
						}
					})
					.catch(err => {
						uni.showToast({
							title: '退出失败！',
							icon: 'none'
						})
					});
			},
			showPop(e) {
				console.log(e, 'eee');
				const inputType = e.currentTarget.dataset.type; // 获取输入框的标识
				this.show = true;
				this.currentInputType = inputType; // 在组件data中新增currentInputType变量来记录当前点击的输入框类型
				console.log(this.infoList[inputType], 'his.infoList[inputType]');
				if (this.infoList[inputType] == undefined || this.infoList[inputType] == '') {
					this.popupInputValue = '';
				} else {
					this.popupInputValue = this.infoList[inputType];
				}
			},
			getPopupTitle() {
				const titleMap = {
					'adultname': '家长姓名',
					'childrenname': '儿童姓名',
					'school': '学校名称',
					'grade': '就读年级',
					'address': '详细地址'

				};
				return titleMap[this.currentInputType] || '';
			},
			saveContent() {

				this.show = false; // 保存后关闭弹窗
			},
			clearHandle() {
				console.log(111);
				const inputProps = {
					'adultname': 'adultname',
					'childrenname': 'childrenname',
					'school': 'school',
					'grade': 'grade',
					'address': 'address'
				};
				if (inputProps[this.currentInputType]) {
					this.popupInputValue = '';
				}
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.showArea = true
			},

			changeClick(value, value2, value3, value4) {

				console.log('地址选择器 = ' + value + value2 + value3 + value4);
				this.province = value;
				this.city = value2;
				this.area = value3;
				this.areaCode = value4;
			},
			onhideShow() {
				this.showArea = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				console.log(e);
				let data = e.detail.target.dataset;
				this.totalAddress = data.province + data.city + data.area;
				this.showArea = false

				this.infoList.province = data.province
				this.infoList.city = data.city
				this.infoList.area = data.area

				this.editUserInfo()
			},
			chooseAvatar() {
				var that = this
				uni.chooseImage({
					count: 1, // 只选择一张图片
					sourceType: ['album'], // 从相册选择
					success: (res) => {
						console.log(res, 'res');
						uni.uploadFile({
							url: img_url + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: function(res) {
								const data = JSON.parse(res.data)
								that.infoList.avatar = data.data.url;
								console.log(that.infoList.avatar, 'this.infoList.avatar');
								that.editUserInfo()
							},
						});
						
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.logout {
		width: 430rpx;
		height: 112rpx;
		border: 2rpx solid #1A1A1A;
		border-radius: 56rpx;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		color: #1A1A1A;
		text-align: center;
		line-height: 112rpx;
		margin: 160rpx auto 0;
	}

	.btn-get {
		border: none;
		outline: none;
		/*清除默认背景 */
		background-color: transparent;
		font-size: 28rpx;
		color: #666666;
	}

	.btn-get::after {
		border: none;
	}

	.popContent {
		width: 630rpx;
		text-align: center;
		position: relative;

		.saveBtn {
			width: 530rpx;
			height: 96rpx;
			background: #1A1A1A;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
			margin: 32rpx auto;
		}

		.close {
			width: 72rpx;
			height: 72rpx;
			position: absolute;
			bottom: -100rpx;
			left: 273rpx;
		}

		.popTitle {
			margin: 68rpx 0 40rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
		}

		.inputInfo {
			position: relative;

			input {
				width: 530rpx;
				height: 108rpx;
				border: 2rpx solid #1A1A1A;
				border-radius: 12rpx;
				margin: 0 auto;
				text-align: left;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.clearable {
				width: 31.97rpx;
				height: 31.97rpx;
				position: absolute;
				top: 40rpx;
				right: 80rpx;
			}
		}


	}

	.totalInfo {
		background: #fff;
		margin-top: 20rpx;

		.totalInfoall {
			padding: 0 40rpx;

			.totalInfoPer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 40rpx 0;

				.leftTitle {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
					width: 250rpx;

				}

				.right {
					display: flex;
					align-items: center;

					.avator {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
						border-radius: 50%;
					}

					.rightgray {
						width: 32rpx;
						height: 32rpx;
					}

					input {
						text-align: right;
						margin-right: 20rpx;
						white-space: pre-wrap;
						overflow: none;
						text-overflow: none;
					}

					.area {
						color: #808080;
						margin-right: 10rpx;
						// width: 315rpx;
						// text-align: right;
					}

					.area-active {
						color: #222222;
					}
				}
			}
		}




	}
</style>